<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" name="" id="file1">
    <input type="button" value="上传文件" id="btn1">
</body>
<script>
    /*
    ajax  2.0  xhr.upload对象
    onabort         终止
    *onerror        错误
    *onload         完成
    onloadend       结束
    onloadstart     开始
    *onprogress     进度变化
    ontimeout       超时
    
    
    
    */




    let oFile=document.getElementById('file1');
    let oBtn=document.getElementById('btn1');

    oBtn.onclick=function(){
        let oAjax = new XMLHttpRequest();

        //进度   要写在open之前
        oAjax.upload.onerror=function(){
            console.log('上传错误,请稍后重试');
        }
        oAjax.upload.onload=function(){
            console.log('上传完成');
        }
        oAjax.upload.onprogress=function(ev){
            console.log((100*ev.loaded,ev.total).toFixed(2)+'%')//loaded完成了多少，total总共多少
        }




        oAjax.open('POST','/upload',ture);
        let fromData=new fromData();
        fromData.set('f1',oFile.files[0])
        oAjax.send(fromData)
        oAjax.onreadystatechange=function(){
            if(oAjax.readyState==4){
                alert(oAjax.status);
            }
        }
       

    }

</script>
</html>